<template>
	<view class="earphoneSelection">
		<view class="es-txt">
			<text>My product</text>
		</view>
		<view class="es-list">
			<view v-for="item in esList" class="es-content">
				<view class="c1">
					{{item.name}}
				</view>
				<view class="c2">
					{{item.uid}}
				</view>
				<button class="bg-purple fz14 round" @click="change(item.Image)">Connect</button>
				<uv-transition :show="show" :mode="['zoom-out']">
					<!-- <img class="es-right" :src="item.Image" mode=""></img> -->
					<uv-image class="es-right" :src="item.Image" width="375rpx" height="375rpx"></uv-image>
				</uv-transition>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				esList: [{
					name: 'JBL Charge 5',
					uid: 'uuid：456152-454adsf',
					Image: 'https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/es1.png'
				}, {
					name: 'JBL Charge 5',
					uid: 'uuid：456152-454adsf',
					Image: 'https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/es2.png'
				}]
			}
		},
		onReady() {
		},
		onLoad() {
			this.show = true;
		},
		methods: {
			change(e) {
				this.show = !this.show;
				uni.navigateTo({
					url: `../esDetails/esDetails?id=${e}`
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding:40rpx;
	}
	.earphoneSelection {
		.es-txt {
			font-size: 48rpx;
			font-weight: 400;
			color: #333;
			margin: 100rpx 0;
		}

		.es-content {
			border-radius: 20px;
			background: linear-gradient(270deg, rgba(243, 243, 243, 0.00) 0%, #F3F3F3 100%);
			padding: 40rpx;
			margin: 140rpx 0;
			// display: flex;
			position: relative;

			.es-right {
				position: absolute;
				bottom: 0;
				right: 0;
			}

			.c1 {
				color: #333;
				font-size: 32rpx;
				font-weight: 400;
			}

			.c2 {
				color: #666;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: 400;
				padding: 30rpx 0;
			}

			.round {
				width: 40%;
				margin-left: inherit;
			}

		}
	}
</style>